<template>
	<view class="hp">
		<view class="uni-padding-wrap">
			<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
				<swiper-item class="swiper-item" v-for="item in banner">
					<image class="swiper_image" :src="item.img" mode=""></image>
				</swiper-item>
			</swiper>
	    </view>
		<!-- 开启你的style -->
		<view class="product_fl">
			<image src="../../static/image/homePage/product02.png" mode=""></image>
		</view>
		<!-- 产品类别 -->
		<view class="produce">
			<view class="shoes" @tap="toproduct(1)">
				<image src="../../static/image/homePage/shoes04.jpg" mode="widthFix"></image>
			</view>
			<view class="clothes" @tap="toproduct(4)">
				<image src="../../static/image/homePage/clothes04.jpg" mode="widthFix"></image>
			</view>
		</view>
		<web-load v-if="loading"></web-load>
	</view>
</template>

<script>
	import webLoad from '../../components/unit/loading.vue';
	
	export default {
		components:{ webLoad },
		data() {
		        return {
		            background: ['color1', 'color2', 'color3'],
		            indicatorDots: true,
		            autoplay: true,
		            interval: 2000,
		            duration: 500,
					banner:[],
					loading : true
		        }
		    },
			onLoad() {
				this.getBanner();
			},
		    methods: {
				//  请求轮播图数据
				getBanner() {
					this.ajax('index/index',{
						success:(res) => {
							this.banner = res.msg.banner;
							this.loading =false;	
						}
					})
				},
				// 点击跳转页面
				toproduct(state) {
					uni.navigateTo({
						url:'/pages/index/index?parent_classify='+state
					})
					},
		        changeIndicatorDots(e) {
		            this.indicatorDots = !this.indicatorDots
		        },
		        changeAutoplay(e) {
		            this.autoplay = !this.autoplay
		        },
		        intervalChange(e) {
		            this.interval = e.target.value
		        },
		        durationChange(e) {
		            this.duration = e.target.value
		        }
		    }
	}
</script>

<style lang="scss">
	
	.page-section-spacing {
		height: 500upx;
		width: 100%;
	}
	.swiper_image,.swiper {
		height: 500upx;
		width: 100%;
	}
	.product_fl {
		display:flex;
		justify-content:center;
		image {
			width: 386upx;
			height: 122upx;
			margin: 28upx 0;
		}
	}
	.produce {
		display:flex;
		justify-content:center;
		flex-wrap: wrap;
		.shoes {
			image {
				width:690upx ;
				height: 200upx;
				margin-bottom: 20upx;
			}
		}
		.clothes {
			image {
				width:690upx ;
				height: 200upx;
			}
		}
	}
</style>
